<template>
	<div class="swiperCn">

		<div class="swiper-container" ref="swiperContainerOne">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item, index) in auntList" :key="index" @click="openModal('SignIn')">
					<div class="auntInfo">
						<div class="imgCn">
							<img :src="item.photo">
							<div class="labCn">
								<span class="lab"><i class="iconfont icon-zan1"></i>{{item.praise}}</span>
								<span class="lab" v-if="item.isVerify"><i class="iconfont icon-shimingrenzheng"></i></span>
							</div>
						</div>
						<div class="word">
							<div class="name">{{item.name}} <span class="type">{{item.type}}</span></div>
							<div class="labCn">
								<span class="lab violet">{{item.age}}岁</span>
								<span class="lab blue" v-for="(itemj, indexj) in item.skill" :key="indexj">{{itemj | stringLength(3)}}</span>
								<span class="lab orange" v-if="item.experience">{{item.experience}}年经验</span>
								<span class="lab red">{{item.class}}</span>
							</div>
							<div class="text">{{item.descript}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="buttonCn">
			<span class="button orange" @click="openModal('quoteList')"><i class="iconfont icon-gouwuche"></i>报价</span>
			<span class="button" @click="swiperNext"><i class="iconfont icon-huanyigeshishi"></i>换一个</span>
		</div>
	</div>
</template>

<script>
	import AuntList from '@/assets/utils/auntList.js'
	import _Swiper from 'swiper/dist/js/swiper.js'
	const Swiper = window.Swiper || _Swiper



	export default {
		name:'auntList',
		data(){
			return{
				auntList:AuntList,
				
				mySwiper:null,
			}
		},
		methods:{
			openModal(string){
				this.$emit('input', string);
			},
			swiperNext(){
				this.mySwiper.slideNext()
			}

			
		},
		created(){
		},
		mounted(){

			this.mySwiper = new Swiper (this.$refs.swiperContainerOne, {
				loop: true,
			})  

		}

	}
</script>

<style scoped lang="scss">
@import '@/assets/utils/utils.scss';


.buttonCn{
	margin-top: 80px;
	text-align: center;
	span.button{
		background-color: $themeColor;
		color: #fff;
		width: 225px;
		display: inline-block;
		margin:0 30px;
		line-height: 94px;
		font-size: 40px;

		i{
			font-size: 40px;
			margin-right:8px;
		}

	}
	span.orange{background-color: #fea77b;}

}

.word{
	width: 100%;
	padding: 0px 60px 0;
	.name{
		font-size: 34px;
		color: #333;
		.type{
			color: #666;
			font-size: 24px;
		}
	}
	.text{
		font-size: 22px;
		color: #666;
		line-height: 40px;
		@include lineclamp(3);

	}
	.labCn{
		width: 120%;
		padding:10px 0;
		span.lab{
			display: inline-block;
			padding:0 8px;
			border-radius:6px;
			background-color: #a4a5a3;
			color: #fff;
			height: 34px;
			margin: 2px;
			line-height: 34px;
		}
		span.violet{background-color: #c19bfc;}
		span.blue{background-color: #91d0df;}
		span.orange{background-color: #fea77b;}
		span.red{background-color: #fc98bf;}
	}

}
.auntInfo{

	div.imgCn{
		width: 100%;
		height: 545px;
		img{
			width: 100%;
		}
		div.labCn{
			position: absolute;
			top:20px;
			left:25px;
			
			span.lab{
				display: inline-block;
				padding:0 10px;
				border-radius:6px;
				background-color: #a4a5a3;
				color: #fff;
				height: 34px;
				line-height: 34px;
				i{
					font-size: 15px;
				}

			}

		}

	}
}
.swiperCn{
	width: 100%;
	height: 1100px;
	background-color: #f7f7f7;
	padding-top:67px;
	overflow: hidden;

}

.swiper-container{
	width: 568px;
	height: 780px;
	overflow: initial;
	.swiper-slide{
		width: 568px;
		height: 780px;
		div.auntInfo{
			width: 520px;
			height: 780px;
			background-color: #fff;
			border-radius:8px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
		}

	}
}
</style>